import React from 'react';
import { Box, Icon, MainColorType, SingleSelect, Text } from '@nova-hf/ui';
import { Trans } from 'beta/utils/i18n';
import getConfig from 'next/config';
import { useTranslation } from 'utils/i18n';

const { publicRuntimeConfig } = getConfig();
const redirectURL = publicRuntimeConfig.NOVA_WEB_URL ?? '';

type SelectStoreProps = {
  onSelectStore: (id: string) => void;
  storeSelected: string;
  color?: MainColorType;
  contractId: string;
};

export const SelectStore = ({
  onSelectStore,
  storeSelected,
  color,
  contractId,
}: SelectStoreProps) => {
  const { t } = useTranslation('fiber');

  const selectOptions = [
    {
      label: t('fiberDevices.lagmuli'),
      value: 'lagmuli',
    },
    {
      label: t('fiberDevices.smari'),
      value: 'smari',
    },
    {
      label: t('fiberDevices.kringlan'),
      value: 'kringlan2',
    },
    {
      label: t('fiberDevices.akureyri'),
      value: 'akureyri',
    },
    {
      label: t('fiberDevices.selfoss'),
      value: 'selfoss',
    },
  ];
  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        justifyContent="center"
        marginBottom={3}
        width="8/12"
      >
        <Text variant="h5" color="black100">
          {t('fiberDevices.deviceService')}
        </Text>
        <Text marginTop={7} marginBottom={4} variant="pLargeRegular">
          {t('fiberDevices.where')}
        </Text>
      </Box>

      <Box display="flex" flexDirection="column" gap={5}>
        <Box width="8/12">
          <SingleSelect
            color={color ?? 'pink'}
            defaultMenuIsOpen={false}
            placeholder={t('fiberDevices.shop')}
            id="verslanir"
            label={t('fiberDevices.store')}
            maxMenuHeight={250}
            onChange={(e) => onSelectStore(e?.value ?? '')}
            value={selectOptions.find((option) => option.value === storeSelected)}
            isClearable={false}
            options={selectOptions}
            required
          />
        </Box>
        <Box display="inline-flex" gap={1} alignItems="center">
          <Icon icon="info" size={24} color={color} />
          <Text variant="pSmallRegular" color={color}>
            <Trans i18nKey={'fiber:fiberItems.rentalSignup.linkToNova'}>
              Ef þú vilt senda búnað heim þarf að fara í gegnum ferlið
              <Box
                display="inline"
                borderBottomStyle="solid"
                borderWidth="1px"
                transition="medium"
                background={{ sm: 'transparent', hover: color }}
                color={{ sm: color, hover: 'white' }}
                borderColor={{ sm: color, hover: color }}
                renderAs={'a'}
                href={`${redirectURL}/audkenning/staff?redirect=/netid/bunadarleiga/komdu/1?contractId=${contractId}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                hér
              </Box>
            </Trans>
          </Text>
        </Box>
      </Box>
    </>
  );
};